<%@ page contentType="text/html;charset=UTF-8"  isELIgnored="false" language="java" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" href="../css/pintuer.css">
<link rel="stylesheet" href="../css/admin.css">
  <link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery-1.4.2.js"></script>
  <script src="../js/jquery.js"></script>
<script src="../js/pintuer.js"></script>
  <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel admin-panel" style="height: 500px">
  <div class="panel-head"><strong class="icon-reorder"> 查询学生信息</strong></div>
  <div class="padding border-bottom">
<%--    输入按钮组--%>
    <div class="form-group" >
      <div style="width: 30px;height: 20px;float: left;"></div><!--用来填充-->
      <div class="label" style="float:left;margin-top: 10px">
        <label>学生学号：</label>
      </div>
      <div class="field" style="float:left;">
        <input type="text" class="input w50" style="width: 200px;" id="id" name="id" placeholder="请输入学生学号..." />
        <div class="tips"></div>
      </div>
      <div style="width: 200px;height: 20px;float: left;"></div><!--用来填充-->
      <div class="label" style="float:left;margin-top: 10px">
        <label>学生姓名：</label>
      </div>
      <div class="field" style="float:left;">
        <input type="text" class="input w50" style="width: 200px;" id="name" name="name" placeholder="请输入学生姓名" />
        <div class="tips"></div>
      </div>
      <div style="width: 200px;height: 20px;float: left;"></div><!--用来填充-->
<%--      <button style="float:left;" type="button" id="search" class="button border-yellow"><span class="icon-plus-square-o"></span> 查询</button>--%>
      <button style="width: 200px;height: 40px;background-color: #ddeeff" type="button" id="search" >查询</button>
      <script>
        $("#search").click(function() {<!--点击查询按钮触发的事件-->
            var page={start:1,count:10,total:10},totalPages=1;
          var $tds=$("#table").empty();<!--清空子元素-->
          $("#table").append("<tr>\n" +
                  "      <th width=\"15%\">学号</th>\n" +
                  "      <th width=\"25%\">姓名</th>\n" +
                  "      <th width=\"15%\">性别</th>\n" +
                  "      <th width=\"20%\">年龄</th>\n" +
                  "      <th width=\"15%\">所在班级</th>\n" +
                  "    </tr>");<!--添加表头-->
          var id = $("#id").val();
          if(id==''){
            id=0;
          }
          var name = $("#name").val();
            //更改页面设置
            $.post(" /setPageInfo",{idx:1},function (data) {
            },"json");
          // 查询数据
          $.post(" /search",{id:id+'',name:name,sex:0,age:18,studentclass:"1882072"},function (data) {
            if(data.length==0){
              $("#table").append("<tr><td colspan='5' align='center'>空</td></tr>");
            }
            for(j = 0; j < data.length; j++) {
              var t="<tr><td>"+data[j].id+"</td><td>"+data[j].name+"</td><td>";
              if(data[j].sex==0){<!--判断是男是女，0为男，1为女-->
                  t+="男";
              }else{
                  t+="女";
              }
              t+="</td><td>"+data[j].age+"</td><td>"+data[j].studentclass+"</td></tr>";
              $("#table").append(t);
              // alert(data[j].id+","+data[j].name+","+data[j].sex+","+data[j].age+","+data[j].studentclass);
            }

            },"json");
            // 查询页面信息
            $.post(" /getPageInfo",function (data) {
                page=data;
                if(page.total%page.count==0){
                    totalPages=page.total/page.count;
                }else{
                    totalPages=page.total/page.count+1;
                }
                if(totalPages==0){//当不满一页时
                    totalPages=1;
                }
            },"json");
        });
      </script>
<%--      <div style="width: 1080px;height: 20px"></div><!--用来填充-->--%>
    </div>
  </div>
  <table class="table table-hover text-center" id="table">
    <tr>
      <th width="15%">学号</th>
      <th width="25%">姓名</th>
      <th width="15%">性别</th>
      <th width="20%">年龄</th>
      <th width="15%">所在班级</th>
    </tr>

  </table>
</div>
<%--分页技术--%>
<ul class="pagination pagination-lg" style="margin-left: 40%;">
    <li><a href="javascript:getPNData(-1)" >&laquo;</a></li>
    <li><a href="javascript:getData($('#idx1').html());" id="idx1" class="pages">1</a></li>
    <li><a href="javascript:getData($('#idx2').html());" id="idx2" class="pages">2</a></li>
    <li><a href="javascript:getData($('#idx3').html());" id="idx3" class="pages">3</a></li>
    <li><a href="javascript:getData($('#idx4').html());" id="idx4" class="pages">4</a></li>
    <li><a href="javascript:getData($('#idx5').html());" id="idx5" class="pages">5</a></li>
    <li><a href="javascript:getData($('#idx6').html());" id="idx6" class="pages">6</a></li>
    <li><a href="javascript:getPNData(1)">&raquo;</a></li>
</ul>
<script>
    // 获取指定页的数据
    function getData(idx) {
        //更改页面设置
        $.post(" /setPageInfo",{idx:idx},function (data) {
        },"json");
        //查询所在页面信息
       // var page={start:1,count:10,total:10},totalPages=1;
        var $tds=$("#table").empty();<!--清空子元素-->
        $("#table").append("<tr>\n" +
            "      <th width=\"15%\">学号</th>\n" +
            "      <th width=\"25%\">姓名</th>\n" +
            "      <th width=\"15%\">性别</th>\n" +
            "      <th width=\"20%\">年龄</th>\n" +
            "      <th width=\"15%\">所在班级</th>\n" +
            "    </tr>");<!--添加表头-->
        var id = $("#id").val();
        if(id==''){
            id=0;
        }
        var name = $("#name").val();
        // 查询数据
        $.post(" /search",{id:id+'',name:name,sex:0,age:18,studentclass:"1882072"},function (data) {
            if(data.length==0){
                $("#table").append("<tr><td colspan='5' align='center'>空</td></tr>");
            }
            for(j = 0; j < data.length; j++) {
                var t="<tr><td>"+data[j].id+"</td><td>"+data[j].name+"</td><td>";
                if(data[j].sex==0){<!--判断是男是女，0为男，1为女-->
                    t+="男";
                }else{
                    t+="女";
                }
                t+="</td><td>"+data[j].age+"</td><td>"+data[j].studentclass+"</td></tr>";
                $("#table").append(t);
                // alert(data[j].id+","+data[j].name+","+data[j].sex+","+data[j].age+","+data[j].studentclass);
            }

        },"json");
    }
    // 获取上一页或下一页的数据
    function getPNData(step) {
        if(step==-1){
            if ($("#idx1").text()!=1){
                for(var j=1;j<=6;j++){
                    $("#idx"+j).text($("#idx"+j).text()-1);
                }
           }
        }else{
           if ($("#idx6").text()!= totalPages){
                for(var j=1;j<=6;j++){
                    $("#idx"+j).text(Number.parseInt($("#idx"+j).text())+step);
                }
           }
        }


    }
</script>
</div>
</body></html>